<template>
  <el-dialog v-model="dialogVisible" width="480" :before-close="close">
    <template #header>
      <span style="font-size: 16px">新增歌曲</span>
    </template>
    <template #default>
      <div class="form-box">
        <el-form-item label="选择歌曲">
          <el-select v-model="song" clearable style="width: 266px">
            <el-option label="全部" :value="1" />
            <el-option label="启用" :value="2" />
            <el-option label="禁用" :value="3" />
          </el-select>
        </el-form-item>
      </div>
      <div class="flex-x-end">
        <el-button
          type="primary"
          style="width: 84px; height: 32px; color: #86909c; background-color: #f2f3f5; border: none"
          @click="close"
        >
          取消
        </el-button>
        <el-button
          type="primary"
          style="width: 84px; height: 32px; background-color: #3c80ff"
          class="m-r-30"
        >
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script lang="ts">
export default {
  name: "Add",
};
</script>
<script lang="ts" setup>
import { ref } from "vue";

const dialogVisible = ref(false);
const song = ref(1);
const show = () => {
  dialogVisible.value = true;
};

const close = () => {
  dialogVisible.value = false;
};

defineExpose({
  show,
  close,
});
</script>
<style lang="scss" scoped>
.form-box {
  padding-top: 20px;
  padding-bottom: 94px;
  border-top: 1px solid #f5f5f5;
  border-bottom: 1px solid #f5f5f5;
}
</style>
